import { Button } from 'antd';

import moment from 'moment';

import React, { useEffect } from 'react';

import {
  useFetch,
  useLayout,
  useInput,
  useRadio,
  useRangeDate,
  useSelect,
  useTable,
  useTimeout,
} from './index';

export default () => {
  const { value, DOM: InputRender } = useInput();

  const { value: debounceValue, DOM: debounceValueDOM } = useInput({
    type: 'debounce',
  }); // 防抖

  const { value: throttleValue, DOM: throttleValueDOM } = useInput({
    defaultValue: '节流间隔300毫秒',
    type: 'throttle',
    throttleTime: 300,
  }); // 节流

  const { value: RadioValue, DOM: RadioRender } = useRadio('Apple', []);

  const { date, setDate, DOM: RangePickerDom } = useRangeDate(
    {
      rangeType: 'days',
      range: 15,
      defaultvalue: [moment().subtract(14), moment()],
    } || {},
  );

  const { value: SelectValue, DOM: SelectRender } = useSelect('lucy');

  const { Grid, GridItem } = useLayout();

  const { data, setPage, getData, page, loading, resetPage } = useFetch<any>({
    Api: (e /** 设置对应的参数在调用getData可进行对应的参数传递 */) => Promise.resolve(),
  });

  const { DOM: TableDOM } = useTable({
    loading,
    list: [{ name: '123123123123' }],
    page,
    setPage,
    columns: [
      {
        title: '名字',
        dataIndex: 'name',
      },
    ],
  });

  const { time, stop, start } = useTimeout({ spaceTime: 1000, callback: () => console.log(time) });

  useEffect(() => {
    resetPage({})
    getData({params: 1}) /** 传递的参数对应到Api中传递的参数 */
    console.log(value, RadioValue, date, SelectValue);
    // console.log(InputRender({}), <InputRender />);
  }, [value, RadioValue, date, SelectValue, page.current, page.pageSize]);

  const Fc_ = (): React.FC<any> => () => <div>3456</div>;
  const Fc_J = (): JSX.Element => <div>3456</div>;

  // console.log(Fc_J(), Fc_(), <Fc_J />);

  useEffect(() => {
    console.log('防抖', debounceValue);
  }, [debounceValue]);

  useEffect(() => {
    console.log('节流', throttleValue);
  }, [throttleValue]);
  return (
    <div>
      <h1>自定义hooks测试单元</h1>

      {InputRender({})}
      {/* 更新会被重新渲染 */}
      {/* <InputRender /> */}

      {RangePickerDom({})}

      {debounceValueDOM({})}

      {throttleValueDOM({})}

      <RadioRender
        options={[
          { label: 'Apple', value: 'Apple' },
          { label: 'Pear', value: 'Pear' },
          { label: 'Orange', value: 'Orange' },
        ]}
        optionType="button"
      />

      <SelectRender
        options={[
          { label: 'lucy', value: 'lucy' },
          { label: 'name', value: 'name' },
        ]}
      />

      <Grid columns="3" rows="5" gap="16px">
        <GridItem gridArea="1 / 1 / span 1 / span 1">
          <span className="spanTitle">大灯在线率</span>
        </GridItem>
        <GridItem gridArea="1 / 2 / span 1 / span 1">
          <span className="spanTitle">平均使用时长</span>
        </GridItem>
        <GridItem gridArea="1 / 3 / span 1 / span 1">
          <span className="spanTitle">照明用电</span>
        </GridItem>
        <GridItem gridArea="2 / 1 / span 4 / span 2">
          <span className="spanTitle">统计周期</span>
        </GridItem>
        <GridItem gridArea="2 / 3 / span 4 / span 1">
          <span className="spanTitle">大灯状态</span>
        </GridItem>
      </Grid>
      <TableDOM />
      <Button onClick={start}>开始计时{time}</Button>
      <Button onClick={stop}>停止计时{time}</Button>
    </div>
  );
};
